<template lang="">
  <div>
    <el-table
      v-loading="loading"
      :data="DispatchOrderList"
      row-key="id"
      :row-class-name="tableRowClassName"
      border
    >
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope" v-if="item.prop == 'field_name'">
            <template>
              <span style="margin-left: 10px">{{ scope.row}}dddd</span>
           </template>
        </template>

        <template slot-scope="scope" v-if="item.prop == 'is_show'">
            <template>
          <span style="margin-left: 10px">{{ scope.row[`${item.prop}`] }}</span>
        </template>
        </template>
        <template slot-scope="scope" v-if="item.prop == 'size'">
          <span style="margin-left: 10px">{{ scope.row[`${item.prop}`] }}</span>
        </template>
        <template slot-scope="scope" v-if="item.prop == 'sort'">
          <span style="margin-left: 10px">{{ scope.row[`${item.prop}`] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getInvoicesList, setInvoicesSort } from "@/api/product/index";
import Sortable from "sortablejs";
export default {
  data() {
    return {
      pagination: {
        per_page: 10,
        page: 1,
      },
      oldIndex: null,
      newIndex: null,
      total: 0,
      DispatchOrderList: [],
      col: [
        { label: "派单顺序", prop: "field_name" },
        { label: "是否展示", prop: "is_show" },
        { label: "字体大小", prop: "size" },
        { label: "排序", prop: "sort" },
      ],
      sort_arr: [],
      loading: true,
    };
  },
  mounted() {
    this.get_DispatchOrderList();
    this.init();
  },
  methods: {
    get_DispatchOrderList() {
      this.sort_arr = [];
      getInvoicesList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.DispatchOrderList = res.data;
          this.loading = false;
          this.DispatchOrderList.forEach((item) => {
            let obj = {
              id: item.id,
              sort: item.sort,
            };
            this.sort_arr.push(obj);
          });
        }
      });
      console.log(this.sort_arr);
    },
    set_DispatchOrder(arr) {
      this.loading = true;
      setInvoicesSort({
        sort_arr: arr,
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.get_DispatchOrderList();
        }
      });
    },
    init() {
      const _this = this;
      // 1. 获取拖拽元素的父元素
      // 因为使用的element的table 所以可直接获取tbody
      let el = document.querySelector(".el-table__body-wrapper tbody");

      // 2. 创建并配置相关参数
      var sortable = new Sortable(el, {
        // 此处进行配置 及 回调函数的使用

        // 因为我的需求是只有按住手柄才能进行拖拽，故而设置此参数
        // handle:'.handle_move', // css选择器的字符串 若设置该值，则表示只有按住拖动手柄才能使列表单元进行拖动

        // 我的需求是行拖拽，所以该值设置为行class
        draggable: ".el-table__row", // 允许拖拽的项目类名
        // 因为拖拽过程中不尽兴位置调整，所以就要记录拖拽行初始位置以及目标位置
        // 拖拽中 回调函数
        onMove(customEvent) {
          // 禁止在拖拽过程中交换位置
          // 可将初始位置及目标位置进行记录
          _this.oldIndex = customEvent.dragged.rowIndex; //  初始位置
          _this.newIndex = customEvent.related.rowIndex; // 目标位置
          return false; // 不进行交换
          // 返回值有三个
          // return false; — for cancel
          // return -1; — insert before target
          // return 1; — insert after target
        },

        // 拖拽结束，调整位置
        onEnd() {
          // 在拖拽结束后，获取初始及目标位置
          const { newIndex, oldIndex } = _this;
          const currRow = _this.sort_arr.splice(oldIndex, 1)[0];
          _this.sort_arr.splice(newIndex, 0, currRow);
          console.log(_this.sort_arr);
          _this.newIndex = null;
          _this.oldIndex = null;
          let sort_arr = _this.sort_arr[newIndex].sort;

          _this.sort_arr[newIndex].sort = _this.sort_arr[oldIndex].sort;
          _this.sort_arr[oldIndex].sort = sort_arr;

          console.log(_this.sort_arr);
          _this.set_DispatchOrder(_this.sort_arr);
        },
      });
    },
    // rowDrop() {
    //   const tbody = document.querySelector('.el-table__body-wrapper tbody')
    //   const _this = this
    //   Sortable.create(tbody, {
    //     onEnd({ newIndex, oldIndex }) {

    //        console.log('3333',newIndex,oldIndex)
    //             if (newIndex == oldIndex) return
    //             _this.DispatchOrderList.splice(
    //                 newIndex,
    //                 0,
    //                 _this.DispatchOrderList.splice(oldIndex, 1)[0]
    //             )
    //             var newArray = _this.DispatchOrderList.slice(0)
    //             _this.DispatchOrderList = []
    //             _this.$nextTick(function () {
    //                 _this.DispatchOrderList = newArray
    //             })
    //     }
    //   })
    // },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == this.newIndex) {
        return "warning-row";
      }
      return "";
    },
  },
};
</script>
<style scoped>
.el-table >>> .el-table__body-wrapper tbody {
  cursor: move;
}
.el-table >>> .warning-row {
  background: #1168b9 !important;
  color: #fff !important;
}
</style>
